import React, { useState, useEffect } from 'react';
import {
  View,

  StyleSheet,
  Text,
  FlatList,
  TouchableOpacity
} from 'react-native';
import SearchList from '../components/SearchList';
import mockData from '../mock/data.js';

function ClothingType (props) {
  const { navigation } = props;
  const [activeIndex, setActiveIndex] = useState(0);
  const searchResultList = mockData["getSearchResultList"].data;

  const list = [
    {
      name: "T恤"
    }, {
      name: "裙子"
    }, {
      name: "衬衫"
    }, {
      name: "裤子"
    }, {
      name: "帽衫"
    },
  ];

  const renderHeadItem = ({ item, index }) => {
    return (
      <TouchableOpacity activeOpacity={0.9} onPress={() => setActiveIndex(index)} key={Math.random()} >
        <Text style={[styles.headTab, index != 0 && styles.headTabML, activeIndex == index && styles.headTabActive]} key={Math.random()} >{item.name}</Text>
      </TouchableOpacity>
    )
  };

  return (
    <View style={styles.page}>
      <View style={styles.head}>
        <FlatList
          horizontal
          data={list}
          renderItem={renderHeadItem}
          keyExtractor={() => Math.random()}
          showsHorizontalScrollIndicator={false}
        />
      </View>
      <View style={styles.content}>
        <SearchList data={searchResultList}></SearchList>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'column',
  },
  head: {
    width: 335,
    marginVertical: 20
  },
  headTab: {
    width: 81,
    height: 30,
    lineHeight: 30,
    textAlign: 'center',
    backgroundColor: '#F7F7F7',
    color: '#000',
    borderRadius: 30
  },
  headTabActive: {
    backgroundColor: '#000000',
    color: 'white',
  },
  headTabML: {
    marginLeft: 6
  },
  content: {
    width: 335,
    paddingBottom: 70
  },
  box: {
    width: 160,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexDirection: 'column',
    marginBottom: 18
  },
  boxSingle: {
    marginRight: 14
  },
  boxImg: {
    width: 160,
    height: 262,
    borderRadius: 4
  },
  boxTitle: {
    fontSize: 14,
    marginTop: 17,
    lineHeight: 20,
    height: 40,
    color: '#000'
  },
  boxPrice: {
    fontSize: 21,
    lineHeight: 31,
    color: '#000'
  }
})

export default ClothingType;